<template>
  <div>
    <div @click="toMain">
      <mt-header fixed :title="headTitle">
        <mt-button icon="back" slot="left" @click.stop="goBack">返回</mt-button>
        <mt-button slot="right" style="font-size: 13px;" @click.stop="toggleRead"> {{ readType }}</mt-button>
      </mt-header>
    </div>

    <div class="message-wrapper">
      <div v-for="item in messageList" :key="item.id" class="message-item">
        <div class="head">
          <div style="font-size: 18px; max-width: 80%">{{ item.title }}</div>
          <div v-if="item.status == '0'" style="color: #26a2ff; font-size: 13px;" @click="updateStatus(item.id)">标记已读</div>
        </div>
        <p class="content">{{ item.message }}</p>
        <div class="bottom">
          <div>{{ item.sendBy }}</div>
          <div>{{ item.createAt }}</div>
        </div>
      </div>
    </div>
    <div v-if="messageList.length === 0" style="font-size: 21px; text-align: center; margin-top: 210px;">
      喔噢，没有你的消息。
    </div>
  </div>
</template>
<script>
import axios from '@/api/axiosApi'

export default {
  data () {
    return {
      headTitle: '未读消息',
      readType: '查看已读',
      status: 0,
      messageList: []
    }
  },
  methods: {
    toMain () {
      this.$router.replace({
        path: '/',
        query: this.$route.query
      })
    },
    goBack () {
      this.$router.go(-1)
    },
    _getUnreadMessageList () {
      const openId = localStorage.getItem('openId')
      const _self = this
      axios.post('/message/unreadList', {
        studentId: openId
      }, (data) => {
        _self.messageList = data
      })
    },
    _getReadedMessageList () {
      const openId = localStorage.getItem('openId')
      const _self = this
      axios.post('/message/readedList', {
        studentId: openId
      }, (data) => {
        _self.messageList = data
      })
    },
    toggleRead () {
      if (this.status === 0) {
        this.status = 1
        this.headTitle = '已读消息'
        this.readType = '查看未读'
        this._getReadedMessageList()
      } else {
        this.status = 0
        this.headTitle = '未读消息'
        this.readType = '查看已读'
        this._getUnreadMessageList()
      }
    },
    updateStatus (messageId) {
      const _self = this
      axios.post('/message/read', {
        id: messageId
      }, (data) => {
        _self.messageList.forEach((item, index) => {
          if (messageId === item.id) {
            _self.messageList.splice(index, 1)
          }
        })
      })
    }
  },
  created () {
    this._getUnreadMessageList()
  }
}
</script>

<style>
.message-wrapper .mint-checklist .mint-checklist-title {
  display: none;
}
</style>

<style lang="stylus" scoped>
@import '~assets/stylus/variable.styl';

.message-wrapper {
  margin-top: 48px;
  .message-item {
    background: #fff;
    border-bottom: 1px solid $color-border-3;
    margin-bottom: 16px;
    padding: 12px 16px;
    .head {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .content {
      text-indent: 2em;
      line-height: 1.4rem;
      text-align:justify;
      text-justify:inter-ideograph;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      color: $color-text-dark;
      margin-top: 12px;
      font-size: 14px;
    }
  }
}
</style>
